<template>
	<view class="search-bar">
		<input class="search-input" type="text" confirm-type="search" :placeholder="placeholder" v-model="keywords"
			@confirm="confirm" />
	</view>
</template>

<script>
	export default {
		props: {
			// 子组件属性
			placeholder: {
				type: String,
				default: '搜索'
			}
		},
		data() {
			return {
				keywords: ''
			}
		},
		methods: {
			// 确认
			confirm() {
				const _that = this;
				if (_that.keywords) {
					const key = encodeURIComponent(_that.keywords);
					uni.redirectTo({
						url: `/pages/press/index?key=${key}`
					});
				}
			}
		}
	}
</script>

<style lang="scss">
	.search-bar {
		width: 95vw;
		height: 1.6rem;
		padding: 0.6rem 2.5vw;
		background-color: $uni-color-primary;

		.search-input {
			width: 94%;
			height: 1.6rem;
			font-size: 0.9rem;
			line-height: 1.6rem;
			padding: 0 3%;
			background-color: $uni-bg-color;
			border-radius: 1.6rem;
		}
	}
</style>
